<script lang="ts" setup>
  import { ref, computed } from "vue"
  import gmDialog from '@/components/Dialog/index.vue'
  import { cloneDeep } from "lodash-es"
  import { saveOrUpdate } from '@/api/courseClass'
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import useForm from '@/hooks/useForm'

  interface Props {
    data?: any
  }

  const props = withDefaults(defineProps<Props>(), {
    data: ()=>({}),
  })

  const form = ref<any>(cloneDeep(props.data) || {})
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDialog>>()
  const emit = defineEmits(['cancel','success'])

  const rules: FormRules = {
    name: [
      { required: true, message: '请输入名称', trigger: 'change' },
    ],
  }

  const { handleSubmit } = useForm({formType: 'dialog', emit:emit})

  const cancel = ()=>{
    emit('cancel')
  }

  const success =  ()=>{
    handleSubmit(saveOrUpdate, formRef.value, form.value, dialogRef.value)
  }
</script>

<template>
  <gm-dialog
    ref="dialogRef"
    title="新增/编辑产品系列"
    @cancel="cancel"
    @comfirm="success">
    <!-- "companyName": "",
  "contractName": "",
  "currentPage": 0,
  "name": "",
  "pageSize": 0,
  "settlementCycle": 0,
  "status": 0 -->
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
      <el-form-item  prop="companyName" label="公司名称">
        <el-input v-model="form.companyName" placeholder="请输入公司名称" />
      </el-form-item>
      <el-form-item  prop="companyName" label="公司名称">
        <el-input v-model="form.companyName" placeholder="请输入公司名称" />
      </el-form-item>
      <el-form-item  prop="sort" label="顺序">
        <el-input-number v-model="form.sort" style="width:100%;" :min="1" placeholder="请输入"/>
      </el-form-item>
    </el-form>
  </gm-dialog>
</template>


<style lang="scss" scoped>
</style>
